<template>
	<view class="form-login">
		<view class="title-box">
			<view class="title">欢迎登录</view>
			<view class="desc">请输入账号和密码登录</view>
		</view>
		<view class="form-box">
			<u-form :model="loginForm" :rules="rules" ref="loginFormRef" labelWidth="0">
				<u-form-item prop="username" borderBottom>
					<view class="icon-box">
						<view class="item-icon">
							<image class="icon-img" :src="baseIconUrl + 'icon_userHead.png'" mode="aspectFill" />
						</view>
					</view>
					<u-input v-model="loginForm.username" border="none" placeholder="输入账号"></u-input>
				</u-form-item>
				<u-form-item prop="password" borderBottom>
					<view class="icon-box">
						<view class="item-icon">
							<image class="icon-img" :src="baseIconUrl + 'icon_password.png'" mode="aspectFill" />
						</view>
					</view>
					<u-input v-model="loginForm.password" :password="showPassword" border="none" placeholder="输入密码">
						<template slot="suffix">
							<uni-icons type="eye-slash" v-if="showPassword" @click="changePassword(false)"></uni-icons>
							<uni-icons type="eye" v-else @click="changePassword(true)"></uni-icons>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="login-btn" @click="clickLogin">立即登录</view>
		</view>
		<view class="other-login-box">
			<view class="other-item" v-for="(item, index) in otherLoginConfig" :key="index"
				@click="clickOtherLogin(item)">
				<view class="bottom-icon-box">
					<image class="bottom-icon-img" :src="baseIconUrl + item.icon" mode="aspectFill" />
				</view>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	import api_login from '@/api/login'
	import {
		setToken
	} from '@/utils/auth'
	export default {
		name: 'FormLogin',
		data() {
			const userNameValid = (rule, value, callback) => {
				/^[\da-z]+$/i.test(value) ? callback() : callback(new Error('请输入正确的用户名'))
			}
			const passwordValid1 = (rule, value, callback) => {
				/^\S{6,}$/.test(value) ? callback() : callback(new Error('密码不得少于6位'))
			}
			const passwordValid2 = (rule, value, callback) => {
				/^[\da-z]+$/i.test(value) ? callback() : callback(new Error('密码只能输入字符和数字'))
			}
			return {
				baseIconUrl,
				baseImgUrl,
				loginForm: {
					username: '',
					password: ''
				},
				loginType: '',
				showPassword: true,
				rules: {
					username: [{
							required: true,
							message: '请输入您的用户名',
							trigger: 'blur'
						},
						{
							validator: userNameValid,
							message: '请输入正确的用户名',
							trigger: ['change', 'blur']
						}
					],
					password: [{
							required: true,
							message: '请输入您的密码',
							trigger: 'blur'
						},
						{
							validator: passwordValid1,
							message: '密码不得少于6位',
							trigger: ['change', 'blur']
						},
						{
							validator: passwordValid2,
							message: '密码只能输入字符和数字',
							trigger: ['change', 'blur']
						}
					]
				},
				otherLoginConfig: [{
						name: '商家登录',
						key: 'business',
						icon: 'icon_merchant.png'
					},
					{
						name: '供应商登录',
						key: 'supplier',
						icon: 'icon_supplier.png'
					}
				]
			}
		},
		onLoad(options) {
			this.loginType = options.type
			if (options.type === 'business') {
				this.otherLoginConfig = [{
						name: '用户登录',
						key: 'user',
						icon: 'icon_userLogin.png'
					},
					{
						name: '供应商登录',
						key: 'supplier',
						icon: 'icon_supplier.png'
					}
				]
			}
			if (options.type === 'supplier') {
				this.otherLoginConfig = [{
						name: '用户登录',
						key: 'user',
						icon: 'icon_userLogin.png'
					},
					{
						name: '商家登录',
						key: 'business',
						icon: 'icon_merchant.png'
					}
				]
			}
		},
		onReady() {
			this.$refs.loginFormRef.setRules(this.rules)
		},
		methods: {
			clickOtherLogin(item) {
				if (item.key === 'user') {
					uni.redirectTo({
						url: `/subPages/home/login`
					})
				} else {
					uni.redirectTo({
						url: `/subPages/home/formLogin?type=${item.key}`
					})
				}
			},
			//点击查看密码
			changePassword(showPassword) {
				this.showPassword = showPassword
			},
			async clickLogin() {
				if (this.loginType === 'business') {
					const data = {
						...this.loginForm,
						roleId: 4
					}
					const res = await this.$POST('/login', data)
					if (res.code == 200) {
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('roleId', 4)
						uni.showToast({
							icon: 'success',
							title: '登录成功',
							duration: 2000
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/subPages/otherPages/businessOrder`
							})
						}, 2000)
					} else {
						console.log(res)
					}
				} else if (this.loginType === 'supplier') {
					const data = {
						...this.loginForm,
						roleId: 3
					}
					const res = await this.$POST('/login', data)
					if (res.code == 200) {
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('roleId', 3)
						uni.showToast({
							icon: 'success',
							title: '登录成功',
							duration: 2000
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/subPages/otherPages/supplierOrder`
							})
						}, 2000)
					} else {
						console.log(res)
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	::v-deep.u-form {

		.u-input,
		.u-input__content,
		.u-input__content__field-wrapper {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 16rpx;
			border-radius: 0 40rpx 40rpx 0 !important;
			background-color: #F5F5F5;
		}

		.u-form-item__body__right__content__slot {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.u-line {
			display: none;
		}
	}
</style>
<style lang="scss" scoped>
	.form-login {
		background-color: #FFF;
		height: 100%;
	}

	.title-box {
		padding: 236rpx 34rpx 110rpx;

		.title {
			font-size: 44rpx;
			font-weight: 500;
		}

		.desc {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.form-box {
		padding: 0 60rpx;

		.icon-box {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-left: 36rpx;
			border-radius: 40rpx 0 0 40rpx;
			background-color: #F5F5F5;

			.item-icon {
				width: 48rpx;
				height: 48rpx;

				// background-color: #939393;
				.icon-img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.login-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			margin-top: 80rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			color: #FFF;
			background-color: #0b3f35;
		}
	}

	.other-login-box {
		position: fixed;
		bottom: 140rpx;
		padding: 0 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.other-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.bottom-icon-box {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;

				// background: #27C399;
				.bottom-icon-img {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>